import type { FC } from 'react';
import { Layout, theme } from "antd"
import React from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';

type IProps = {
    collapsed: boolean;
    //setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
    setCollapsed: (bol: boolean) => void;
};


const Header: FC<IProps> = ({ collapsed, setCollapsed }) => {

    // const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    return (
        <Layout.Header style={{ padding: 0, background: colorBgContainer }}>
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: () => setCollapsed(!collapsed),
            })}
        </Layout.Header>
    )
};
export default Header;